// 忘记密码页面

import { Breadcrumb, message, Steps, theme, Modal, Button, ConfigProvider, Space } from 'antd';
import styles from "../css/resetPwd.module.css"
import { useState } from 'react';
import ConfirmPassword from '../components/confirmPassword';
import SoildCaptcha from '../components/slideVerification';
import ConfirmModification from '../components/ConfirmModification';
import ResetSuccessful from '../components/ResetSuccessful';

export default function ResetPassword() {
    // 对话框状态,默认false，关闭
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 进度条
    const steps = [
        {
            title: '确认账号',
            content: 'First-content',
        },
        {
            title: '重置密码',
            content: 'Second-content',
        },
        {
            title: '重置成功',
            content: 'Last-content',
        },
    ];
    // 进度条当前进度
    const [current, setCurrent] = useState(0);
    // 将steps中的数据转化成组件需要的格式
    const items = steps.map((item) => ({
        key: item.title,
        title: item.title,
    }));
    // 滑块拼图验证成功的处理函数
    const SliderVerificationSuccess = () => {
        message.success('验证成功')
        setIsModalOpen(() => false)
        setCurrent(() => current + 1)
    }
    // 确认账号点击事件处理
    const OnConfirmAccount = () => {
        setIsModalOpen(() => true)
    }
    // 密码重置成功事件处理
    const isResetPassword=()=>{
        setCurrent(() => current + 1)
    }
    return <>
        <div className={styles.box}>
            {/* 面包屑导航 */}
            <Breadcrumb
                style={{ fontSize: '20px' }}
                separator=">"
                items={[
                    {
                        title: '登录',
                        href: '/login'
                    },
                    {
                        title: '忘记密码'
                    }
                ]}
            />
            {/* 步骤条 */}
            <Steps current={current} items={items} style={{ margin: '30px 0 0 0' }} />
            {/* 确认密码组件 */}
            {
                current == 0 ? <ConfirmPassword OnConfirmAccount={OnConfirmAccount}></ConfirmPassword> : undefined
            }
            {/* 确认修改组件 */}
            {
                current == 1 ? <ConfirmModification isResetPassword={isResetPassword}></ConfirmModification> : undefined
            }
            {/* 重置成功组件 */}
            {
                current == 2 ? <ResetSuccessful></ResetSuccessful> : undefined
            }
            {/* 对话框 */}
            <Modal
                title="请完成安全验证"
                open={isModalOpen}
                // onOk={() => setIsModalOpen(false)}
                onCancel={() => setIsModalOpen(() => false)}
                footer=""
                maskClosable={false}
                width={545}
            >
                {/* 滑块拼图验证组件 */}
                <SoildCaptcha onSuccess={SliderVerificationSuccess}></SoildCaptcha>
            </Modal>
        </div>
    </>
}